// 移动端设备检测工具类
export class DeviceDetector {
    /**
     * 检测是否为移动端设备
     * @returns {boolean} 返回true表示是移动端设备
     */
    static isMobileDevice() {
        // 方法1: 检测用户代理字符串
        const userAgent = navigator.userAgent.toLowerCase();
        const mobileKeywords = [
            'android', 'iphone', 'ipad', 'ipod', 'blackberry', 
            'windows phone', 'mobile', 'symbian', 'webos'
        ];
        
        const isMobileUA = mobileKeywords.some(keyword => 
            userAgent.includes(keyword)
        );
        
        // 方法2: 检测触屏支持
        const isTouchDevice = 'ontouchstart' in window || 
                             navigator.maxTouchPoints > 0 || 
                             navigator.msMaxTouchPoints > 0;
        
        // 方法3: 检测屏幕尺寸（宽度小于768px通常被认为是移动设备）
        const isSmallScreen = window.innerWidth <= 768;
        
        // 方法4: 使用媒体查询检测
        const mediaQuery = window.matchMedia('(pointer: coarse)');
        const isCoarsePointer = mediaQuery.matches;
        
        // 综合判断：满足以下任一条件即为移动端
        // 1. 用户代理包含移动设备关键词
        // 2. 支持触屏且屏幕较小
        // 3. 使用粗糙指针（触屏）
        return isMobileUA || (isTouchDevice && isSmallScreen) || isCoarsePointer;
    }
    
    /**
     * 检测是否支持触屏操作
     * @returns {boolean} 返回true表示支持触屏
     */
    static isTouchSupported() {
        return 'ontouchstart' in window || 
               navigator.maxTouchPoints > 0 || 
               navigator.msMaxTouchPoints > 0;
    }
    
    /**
     * 获取设备类型信息
     * @returns {Object} 设备类型信息
     */
    static getDeviceInfo() {
        return {
            isMobile: this.isMobileDevice(),
            isTouch: this.isTouchSupported(),
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            userAgent: navigator.userAgent,
            pixelRatio: window.devicePixelRatio || 1
        };
    }
    
    /**
     * 检测设备方向
     * @returns {string} 'portrait' | 'landscape'
     */
    static getOrientation() {
        return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
    }
    
    /**
     * 监听设备方向变化
     * @param {Function} callback 方向变化时的回调函数
     */
    static onOrientationChange(callback) {
        const handleOrientationChange = () => {
            // 延迟执行以确保尺寸更新完成
            setTimeout(() => {
                callback(this.getOrientation());
            }, 100);
        };
        
        // 监听多种可能的方向变化事件
        window.addEventListener('orientationchange', handleOrientationChange);
        window.addEventListener('resize', handleOrientationChange);
        
        return () => {
            window.removeEventListener('orientationchange', handleOrientationChange);
            window.removeEventListener('resize', handleOrientationChange);
        };
    }
}